<!-- src/App.vue -->
<!--
 * @file App.vue
 * @description 应用程序的根组件，负责初始化环境配置和提供全局布局容器
 * @author Logan.Li
-->
<script setup>
import { onMounted } from 'vue';

// 在组件挂载后执行环境配置检查
onMounted(() => {
    // 打印当前运行环境信息，使用样式化的console输出提高可读性
    console.log(
        `%cNODE_ENV:%c ${import.meta.env.MODE}`,
        "background-color:#41b883;color:#fff;padding:3px;border-radius:3px",
        "color:#007bff"
    );

    // 打印API基础路径配置
    console.log(
        `%cVITE_APP_BASE_API:%c  ${import.meta.env.VITE_APP_BASE_API}`,
        "background-color:#f4516c;color:#fff;padding:3px;border-radius:3px",
        "color:white;"
    );

    // 获取并记录当前应用的运行环境信息
    const VUE_WEB_DOMIAN_FULL_URL = window.location.href;
    const VUE_WEB_DOMIAN_HOSTNAME = window.location.hostname;
    console.log("Domian:", VUE_WEB_DOMIAN_HOSTNAME, "Page:", VUE_WEB_DOMIAN_FULL_URL)
});
</script>

<template>
    <!-- 路由视图容器：用于渲染当前路由匹配的组件 -->
    <router-view />
</template>

<style>
/* 全局样式：确保应用占满整个视口且无边距 */
html,
body,
#app {
    height: 100%;
    margin: 0;
    /* 消除顶部、左右间隙，提供更好的全屏体验 */
}
</style>
